<template>
  <div>
    <header id="header">
      <div class="homeHeader">
        <div class="logo">
          <img class="logoImg" :src="logo" alt="" srcset="" />
        </div>
        <nav>
          <ul>
            <li><a target="_blank">首页</a></li>
            <li>
              <a  target="_blank"
                >模板</a
              >
            </li>
            <li>
              <a target="_blank"
                >案例</a
              >
            </li>
            <li>
              <a target="_blank"
                >定价</a
              >
            </li>
            <li>
              <a target="_blank"
                >帮助</a
              >
            </li>
            <li>
              <a target="_blank"
                >关于</a
              >
            </li>
          </ul>
        </nav>
        <div class="navBtn">
          <div>登录/注册</div>
        </div>
      </div>
    </header>
    <main></main>
  </div>
</template>   

<script>
// import QrcodeVue from "qrcode.vue";
// import { site } from "../api/activityList.js";
export default {
  data() {
    return {
    //   dialogVisible: false,
    //   activeName: "login",
    //   logonShow: true,
    //   enrollShow: false,
    //   userName: "",
    //   logo: "",
    //   userPwd: "",
    //   codeCz: "",
    //   code: "获取验证码",
    //   mobile: "",
    //   pwd1: "",
    //   checked: true,
    //   codeVal: "",
    //   flag: false,
    //   link: "",
    //   names:"",
    //   size: 200,
    //   dl_username: "",
    //   dl_pwd: "",
    //   reset: false,
    //   loginPage: true,
    //   content: true,
    //   wx: false,
    //   idnum: require("../assets/img/wechatLogin.png"),
    //   planar: require("../assets/img/eqcode1.png"),
    //   i: 0,
    //   cartoon: "",
    //   cartoon1: "",
    //   affair: "",
    //   times: "",
    //   gwlink: "",
    };
  },
  created() {
    
    // //如果头部带token，直接进入首页
    if(this.$route.query.token){
    //   this.$cookies.set("token",this.$route.query.token )
    //   user_info({token:this.$cookies.get("token")}).then(res=>{
    //     if (res.code === 1) {
    //         localStorage.setItem(
    //           "userinfo",
    //           JSON.stringify(res.data)
    //         );
    //         localStorage.setItem("token", res.data.token);
    //         this.$router.push('/')
    //       }
    //   })
    }
    // site({}).then((res) => {
    //   this.gwlink = res.data.data.websitedomin;
    //   this.logo = res.data.data.syslogmain;
    //   this.names=res.data.data.name;
    //   this.$store.state.name=res.data.data.name
    //   if (this._isMobile()) {
    //     console.log("手机端");
    //     if(this.$route.query.shareid){
    //       location.href=res.data.data.phonedomin+'/#/login?shareid='+this.$route.query.shareid
    //     }else{
    //       location.href=res.data.data.phonedomin
    //     }
    //   }
    // });
    
  },
  mounted() {
  },
  methods: {
    // links() {},
    // enter1(e) {},
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag;
    },
    
    //获取验证码
    gain() {
      this.codeEvent(this.mobile, (this.affair = "register"));
    },
    //封装验证码的函数
    codeEvent(iphone, affair) {
      let reg = /^1[0-9]{10}$/;
      if (!reg.test(iphone)) {
        this.$message({
          message: "请输入正确手机号!",
          type: "error",
          offset: 150,
        });
      } else {
        login_git({
          mobile: iphone,
          event: affair,
        }).then((res) => {
          if (res.data.code === 1) {
            this.$message({
              message: res.data.msg,
              type: "success",
              offset: 150,
            });
            this.countDown(60);
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
              offset: 150,
            });
          }
        });
      }
    },
    //验证码倒计时
    countDown(time) {
      let _this = this;
      time--;
      if (time == 0) {
        _this.code = "获取验证码";
        return;
      }
      setTimeout(function () {
        _this.code = time + "秒";
        _this.countDown(time);
      }, 1000);
    },
    //登录
    // enter() {
    //   let _this = this;
    //   let reg = /^1[0-9]{10}$/;
    //   if (!reg.test(this.dl_username)) {
    //     this.$message({
    //       message: "请输入正确手机号!",
    //       type: "error",
    //       offset: 150,
    //     });
    //   } else if (!this.checkPassword(this.dl_pwd)) {
    //     return
    //   } else {
    //     login_dl({
    //       account: this.dl_username,
    //       password: this.dl_pwd,
    //     }).then((res) => {
    //       if (res.data.code === 1) {
    //         this.$message({
    //           message: res.data.msg,
    //           type: "success",
    //           offset: 150,
    //         });
    //         localStorage.setItem(
    //           "userinfo",
    //           JSON.stringify(res.data.data.userinfo)
    //         );
    //         this.$cookies.set("token", res.data.data.userinfo.token);
    //         localStorage.setItem("token", res.data.data.userinfo.token);

    //         setTimeout(function () {
    //           _this.$router.push({
    //             name: "Personal",
    //           });
    //         }, 2000);
    //       } else {
    //         this.$message({
    //           message: res.data.msg,
    //           type: "error",
    //           offset: 150,
    //         });
    //       }
    //     });
    //   }
    // },
    // //检查密码
    // checkPassword(val){
    //   const res = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(val)
    //   res ? '' : this.$message({
    //           message: '密码由数字和英文字母组成，长度6-20',
    //           type: "error",
    //           offset: 150,
    //         })
    //   return res
    // }
  },
};
</script>

<style lang="scss" scoped>
.swiper1 {
  width: 420px;
  height: 520px;
  overflow: hidden;
}
.swiper1 img {
  width: 420px;
  height: 520px;
}
#captcha {
  width: 500px;
  height: 500px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
#password {
  cursor: pointer;
}
.logoImg {
  width: 100%;
}
.checkbox {
  margin-top: 30px;
}
.create {
  display: inline-block;
  color: #fff;
  margin-right: 20px;
  width: 96px;
  height: 34px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: 16px;
}

.creates {
  color: #3398ff;
  border: 1px solid #3398ff;
}

.navBtn {
  height: 80px;
  display: flex;
  align-items: center;
  margin-left: 36px;
}
input {
  height: 45px;
}

.enter {
  display: inline-block;
  color: #3398ff;
  width: 96px;
  height: 34px;
  line-height: 34px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}

.enters {
  background: #3398ff;
  color: #fff;
}

header {
  display: flex;
  background-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 80px;
  justify-content: space-around;
  position: fixed;
  top: 0;
  z-index: 999999;
}

.head {
  display: flex;
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
  height: 80px;
  justify-content: space-around;
  position: fixed;
  top: 0;
}

.homeHeader {
  display: flex;
  align-items: center;
  width: 1200px;
  justify-content: space-between;
}

nav > ul > li > a {
  color: #fff;
  font-size: 16px;
}

nav > ul {
  display: flex;
  width: 740px;
  justify-content: space-around;
}

.logo {
  width: 140px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bannar > img {
  width: 100%;
}

/* 底部css代码 */

footer {
  width: 100%;
  display: flex;
  background-color: #d7d7d7;
  justify-content: space-around;
}

.btmNav {
  width: 1200px;
}

.btmNavImg {
  width: 136px;
  padding-top: 30px;
  height: 33px;
  padding-bottom: 30px;
}

.btmNavImg > img {
  width: 136px;
  height: 33px;
}

.btmNavA {
  display: flex;
  padding-bottom: 15px;
  justify-content: space-between;
  border-bottom: 1px solid #2b354f;
  margin-bottom: 15px;
}

.iphone {
  width: 370px;
  font-size: 16px;
}

.product {
  width: 88px;
  margin-right: 15px;
}

.ended {
  padding-bottom: 15px;
}

.product > p,
.product > a {
  display: inline-block;
  width: 100px;
  margin-bottom: 15px;
}

.scheme {
  width: 250px;
}

.scheme > a,
.trade > a,
.hyperlink > a {
  display: inline-block;
  width: 100px;
  margin-bottom: 15px;
}

.trade > p {
  margin-bottom: 15px;
}

.scheme > p {
  margin-bottom: 15px;
}

.trade {
  width: 240px;
}

.hyperlink {
  width: 70px;
}

.hyperlink > p {
  margin-bottom: 15px;
}
main {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 150px;
}

main > div {
  width: 850px;
  height: 520px;
  box-shadow: 0 5px 20px 0 rgb(51 152 255 / 10%);
  border-radius: 10px;
  overflow: hidden;
}

body {
  background-color: #f5f7fb;
  height: auto;
}

nav > ul > li > a {
  color: #000;
  font-size: 16px;
}

.idPwdContent {
  background-color: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#header {
  background-color: #fff;
}

.navBtn > div:nth-child(1) {
  display: inline-block;
  color: #000;
  width: 96px;
  height: 34px;
  line-height: 34px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
}

.navBtn > div:nth-child(2) {
  display: inline-block;
  color: #3398ff;
  margin-right: 20px;
  width: 96px;
  height: 34px;
  line-height: 32px;
  text-align: center;
  border: 1px solid #3398ff;
  border-radius: 4px;
  font-size: 16px;
}

.navBtn {
  width: 240px;
  justify-content: space-between;
}

.swiper {
  width: 420px;
  height: 520px;
  overflow: hidden
}

.swiper img {
  width: 420px;
  height: 520px;
}

main > div > div:nth-child(2) {
  flex: 1;
  display: flex;
  background-color: #fff;
  flex-direction: column;
  align-items: center;
}

.login > div > img {
  width: 20px;
  height: 20px;
}

.idnum {
  height: 32px;
  width: 145px;
}

.qrcode {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}

.qrcode > img:nth-child(2) {
  margin-top: 10px;
  margin-right: 10px;
  width: 50px;
}

.qrcode > img:nth-child(1) {
  margin-top: 15px;
}

.choose {
  width: 360px;
  border-bottom: 1px solid #eeeeee;
  display: flex;
  justify-content: center;
}

.choose > li {
  width: 180px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  height: 38px;
  cursor: pointer;
}
.choose > li.active {
  color: #0076ff;
}
.on {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}

.login {
  width: 360px;
  margin-top: 30px;
}

.login > div {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 15px;
  height: 45px;
  align-items: center;
}

.login > div > input {
  width: 100%;
  border: 0;
  text-indent: 5px;
  background: #fff;
}

.login > div > input::placeholder {
  color: #c0c4cc;
  padding-left: 5px;
}

.btn1,
.btn2 {
  border: none;
  background-color: #0076ff;
  color: #fff;
  width: 100%;
  height: 36px;
  border-radius: 5px;
  font-size: 15px;
  margin-top: 25px;
}

.login > span {
  color: #999999;
  display: block;
  margin-top: 25px;
}

.enroll > div > img {
  width: 20px;
  height: 20px;
}

.enroll {
  width: 360px;
  margin-top: 30px;
}

.enroll > div {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 15px;
  height: 45px;
  align-items: center;
}

.enroll > div > input {
  width: 100%;
  border: 0;
  text-indent: 5px;
  background: #fff;
}

.enroll > div > input::placeholder {
  color: #c0c4cc;
  padding-left: 5px;
}

.btn1 {
  border: none;
  background-color: #0076ff;
  color: #fff;
  width: 100%;
  height: 36px;
  border-radius: 5px;
  font-size: 15px;
  margin-top: 30px;
}

.swiper {
  margin: 0;
}

.enroll .code > input {
  width: 288px;
}

.btn {
  border: 1px solid #409eff;
  height: 27px;
  line-height: 25px;
  padding: 1px 0;
  width: 102px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  color: #999999;
}

.readDeal {
  margin-top: 30px;
}

.enroll > p {
  display: flex;
  align-items: baseline;
}

.enroll > p > span > a {
  color: #4f93fe;
}

.enroll > p > span {
  margin-left: 5px;
}

.weixin > p {
  text-align: center;
  padding-top: 10px;
}
.animationname-enter-to,
.animationname-leave-to {
  animation: myfirst 1.5s;
}
@keyframes myfirst {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-120px);
    opacity: 0;
  }
}

.loginDiv {
  display: flex;
}

#resetPassword {
  background-color: #fff;
}

.loginDiv2 {
  display: flex;
  justify-content: flex-start;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content > h1 {
  font-size: 18px;
  color: #333;
  padding-top: 65px;
  letter-spacing: 3px;
  text-align: center;
  margin-top: 60px;
}

.reset > div > img {
  width: 20px;
  height: 20px;
}

.reset {
  width: 360px;
  margin-top: 30px;
}

.reset > div {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 15px;
  height: 45px;
  align-items: center;
}

.reset > div > input {
  width: 100%;
  border: 0;
  text-indent: 5px;
  background: #fff;
}

.reset > div > input::placeholder {
  color: #c0c4cc;
  padding-left: 5px;
}

.back {
  text-align: right;
  margin-top: 20px;
  color: #4f93fe;
  cursor: pointer;
}

::v-deep .el-dialog__body > .xie {
  height: 500px;
  overflow: scroll;
}
</style>